import { memo } from "react";
import type { FC } from "react";
import { useSetState } from "ahooks";
import { Form } from "antd";
import { Editor } from "../education/edit";
import styles from "./index.module.scss";
import Input from "@/app/components/Input";

const list = [
  {
    name: "英语四级",
    selected: false,
  },
  {
    name: "英语六级",
  },
  {
    name: "计算机一级",
  },
  {
    name: "计算机二级",
  },
  {
    name: "计算机三级",
  },
  {
    name: "计算机四级",
  },
  {
    name: "普通话一级",
  },
  {
    name: "普通话二级",
  },
];

interface IndexProps {
  displayName: string;
}
function Selection(props: any) {
  const [state, setState] = useSetState<{ credential: any[]; name: string }>({
    credential: list,
    name: "",
  });

  const isSelect = (name: string) => {
    if (!props.value) return false;
    return props.value.findIndex((t: any) => t.name === name) !== -1;
  };
  const remove = (name: string) => {
    props.onChange(props.value.filter((item: any) => item.name !== name));
  };
  const onAdd = () => {
    if (!state.name) return;
    if (
      props.value &&
      props.value?.findIndex((t: any) => t.name === state.name) !== -1
    ) {
      return;
    }
    props.onChange([...(props.value || []), { name: state.name }]);
    setState({ name: "" });
  };
  const choose = (item: any) => {
    if (
      props.value &&
      props.value?.findIndex((t: any) => t.name === item.name) !== -1
    ) {
      return;
    }
    props.onChange([...(props.value || []), item]);
  };
  return (
    <div>
      <div className={styles.flex}>
        {state.credential.map((item, index) => {
          const selected = isSelect(item.name);
          return (
            <div
              key={item.name}
              className={
                selected
                  ? ` ${styles.flexItem} ${styles.selected}`
                  : `${styles.flexItem}`
              }
              onClick={() => choose(item)}
            >
              {item.name}
            </div>
          );
        })}
      </div>
      <div className={styles.addCertificate}>
        <input
          className={styles.input}
          value={state.name}
          onChange={(e) => {
            setState({
              name: e.target.value,
            });
          }}
          placeholder="请输入自定义名称"
        />
        <div
          className={
            state.name ? `${styles.btn}` : `${styles.btn} ${styles.forbid}`
          }
          onClick={onAdd}
        >
          +添加自定义荣誉证书
        </div>
      </div>
      <div className={styles.selectedItemWraper}>
        {props.value?.map((item: any) => {
          return (
            <div key={item.name} className={styles.selectedItem}>
              <span className={styles.name}> {item.name}</span>
              <svg
                className={styles.remove}
                onClick={() => remove(item.name)}
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 17 17"
              >
                <path
                  stroke="currentColor"
                  strokeLinecap="round"
                  fill="none"
                  strokeLinejoin="round"
                  strokeWidth="1.5"
                  d="M13.38 7.258s-.361 4.49-.571 6.382c-.1.903-.658 1.432-1.572 1.449-1.74.031-3.481.033-5.22-.003-.88-.018-1.428-.554-1.526-1.442-.211-1.908-.571-6.386-.571-6.386M14.302 5.106H2.997M12.124 5.106c-.523 0-.974-.37-1.076-.883l-.162-.81a.853.853 0 00-.825-.633H7.24a.853.853 0 00-.825.632l-.162.811a1.099 1.099 0 01-1.076.883"
                ></path>
              </svg>
            </div>
          );
        })}
      </div>
    </div>
  );
}
const Index: FC<IndexProps> = ({ displayName }) => {
  return (
    <>
      <div
        style={{
          margin: "10px 10px 20px",
          fontWeight: "bold",
          fontSize: "16px",
        }}
      >
        {displayName}
      </div>
      <Form.Item name={"description"} label="">
        <Editor />
      </Form.Item>
      <Form.Item name={"description"} hidden>
        <Input />
      </Form.Item>
      <Form.Item name={"list"}>
        <Selection />
      </Form.Item>
    </>
  );
};

export default memo(Index);
